import React, { Component } from 'react'
/*
  子组件给父组件传参
  1. 先在父组件中定义一个接收的方法
  2. 父组件通过属性的方式将函数传递到子组件中
  3. 子组件通过 props.函数 的方式进行触发且携带参数

  在 react 中子组件给父组件传递内容，本质上还是在父给子传，只是
  传递过去的是一个函数
*/ 
const Header = function(props){
    // props.fn('子组件传递的内容')
    props.fn({
      msg: '子组件传递的内容',
      num: 100
    })
    return (<>
        <div onClick={()=>{
          // 在点击事件中将参数传递到父组件中使用
          props.fn({
            msg: '子组件触发',
            num: 10010
          })
        }}> 你好 </div>
    </>)
}

class Content extends Component {
    
    render(){
        return (<>
            <div>
                内容部分
            </div>
        </>)
    }
}

export default class App extends Component {

  state = {}

  // 父组件中先定义一个接收的函数，该函数是用来获取子组件传递的参数用的
  getData(val){
    console.log('父组件接收:', val);
  }

  render() {
    return (
      <div>
        <Header fn={this.getData}> </Header>
        <Content />
      </div>
    )
  }
}

